/**
* @Author: Zhengfeng.Yao
* @Date:   2017-01-23 14:12:23
* @Last modified by:   Zhengfeng.Yao
* @Last modified time: 2017-02-09 14:49:47
*/

import React, { Component } from 'react';
import cn from 'classnames';
import './steps.less';

function Step({status, children}) {
  return (
    <div className={cn({
        "aegis-steps-step": true,
        "aegis-steps-step-finished": status == 'finished',
        "aegis-steps-step-current": status == 'current'
      })}>
      <div className="aegis-steps-step-head">
        <div className="aegis-steps-step-head-inner">
          <span className={cn("aegis-steps-step-head-inner-icon anticon", {'anticon-check': status == 'finished'})}/>
        </div>
      </div>
      <div className="aegis-steps-step-main">
        <div className="aegis-steps-step-main-title">
          {children}
        </div>
      </div>
    </div>
  );
}

export default class Steps extends Component {
  static Step = Step;

  render() {
    const { current, children } = this.props;
    return (
      <div className="aegis-steps">
        {
          children && React.Children.map(children, (ele, idx) => {
            const np = {
              status: idx == current ? 'current' : (idx < current ? 'finished' : 'wait')
            }
            return React.cloneElement(ele, np);
          })
        }
      </div>
    );
  }
}
